<template>
  <div id="forwardRoom">
    <div class="forward_table" v-if="forwardRoomsStatus && forwardRoomsStatus.length>0">
      <ul class="roomsName">
        <li></li>        
        <li v-for="dayString1 in totalDays">{{dayString1}}</li>
      </ul>
      <div class="table-data">
        <ul class="roomsDate" v-for="(item,index) in roomInforList">
            <li>{{item.roomTitle}}</li>
            <li v-for="dayString in totalDays">
              <div  v-if="item.fullDates">
                  <div v-for="curfullDates in item.fullDates" v-if="dayString==curfullDates.date">
                    <div class="bgRed" @click="goOrderDetails(curfullDates.orderId)">                  
                    </div>
                </div>
              </div>        
            </li>
        </ul>
      </div>
    </div>
    <div v-else>
        <p v-if="textError!=''">{{textError}}</p>
        <p v-else> 暂无数据 </p>
    </div>
  </div>
</template>

<script>
  //require('../../assets/css/personalcenter.scss'); //引入的scss
  Array.prototype.unique = function() {
    // n为hash表，r为临时数组
    var n = {}, r = [];
    for (var i = 0; i < this.length; i++) {
        // 如果hash表中没有当前项
        if (!n[this[i]]) {
            // 存入hash表
            n[this[i]] = true;
            // 把当前数组的当前项push到临时数组里面
            r.push(this[i]); 
        }
    }
    return r;
}
  import {
    mapState,
    mapGetters,
    mapMutations,
    mapActions
    } from 'vuex'
  export default {
    name: 'forwardRoom', //组件的名字
    data() {
    return { //数据
      baseUrl: $.hsf.baseUrl,
      curYear:'',
      curMonth:'',
      curDays:0,
      nextYear:'',
      nextMonth:'',
      nextDays:0,
      curDaysList:[],
      nextDaysList:[],
      totalDays:[],
      roomInforList:[]
    }
  },
  methods: { //方法
    ...mapActions(['searchForwardRoomsStatus']),
    
    //获取月份的所有天数
    createMonthDay(fullYear,month) {
        let daysOfMonth = [];
        if(!fullYear){
          fullYear = new Date().getFullYear();
        }
        if(!month){
          month = new Date().getMonth() + 1;
        }
        let lastDayOfMonth = new Date(fullYear, month, 0).getDate();
        if(month<10){
            month = '0'+month;
        }
        for (var i = 1; i <= lastDayOfMonth; i++) {
            daysOfMonth.push(fullYear + '-' + month + '-' + (i<10?('0'+i):i));
        };
        this.searchForwardRoomsStatus(fullYear+''+month);
        return daysOfMonth;
    },
    //获取下个月的年月日
    getDateOfNextMonth (fullYear,month) {  
      if(!fullYear){
          fullYear = new Date().getFullYear();
        }
        if(!month){
          month = new Date().getMonth() + 1;
        } 
      var nextYear = (month == 11) ? (fullYear + 1) : fullYear;  
      var nextMonth = (month == 11) ? 0 : month + 1;  
      var nextMonthDaysList = this.createMonthDay(nextYear, nextMonth);  
      return  nextMonthDaysList;
    },

    //目前是获取当前月和下各月份的所有数据
    getTwoMonth(){
      let curDaysList  = this.createMonthDay();
      let nextDaysList = this.getDateOfNextMonth();
      this.totalDays = this.totalDays.concat(curDaysList,nextDaysList);
    },  

    //获取roomId:去重
    getRoomIdList(){
      let roomList =[];
      for(let i =0; i<this.forwardRoomsStatus.length;i++){
         roomList.push(this.forwardRoomsStatus[i].roomId)
      }
      roomList = roomList.unique();
      for(let j =0; j<roomList.length;j++){
        let roomInfor =[];
        for(let f =0; f<this.forwardRoomsStatus.length;f++){
            if(roomList[j] == this.forwardRoomsStatus[f].roomId){
                roomInfor.push(this.forwardRoomsStatus[f])
            }
        }
        let room=roomInfor[0];
        for(let i=0;i<roomInfor.length;i++){
          room.fullDates = room.fullDates.concat(roomInfor[i].fullDates);
        }
        this.roomInforList.push(room);
      }
      console.log(this.roomInforList);
    },

    //跳到订单详情页
    goOrderDetails(orderId){
      console.log(orderId);
      this.$router.push({
          path: '/hostOrderDetail',
          query: {orderId:orderId,calendarType:'stay',parentUrl:'/forwardRoom'}
      })
    }
  },
  computed: { //计算 用来引入vuex里面state
    ...mapState(['forwardRoomsStatus','textError']),
  },
  mounted: function() { //组件加载完成
    this.getTwoMonth();    
  },
  updated:function(){
    this.getRoomIdList();
  },
  watch: { //健康某个数据变化后触发某个事件
    
  },
  destroyed: function() { //离开这个组件
    this.forwardRoomsStatus.splice(0,this.forwardRoomsStatus.length);
  },
  components: {

  }

  }
</script>

<style scoped>
  .bgRed{
    background:red;
    width:100%;
    height:100%;
  }
  .fs_flex2{
    height: 60px;
  }
  .border_blue{
    border: 1px solid #5b9bd5;
  }
  .homeList ul li{
    margin-bottom:20px;
  }
  .fullDateList{
    color:#333;
  }
  .fullDateList .heaadTitle{
    color:red;
  }
  #forwardRoom{
    width:100%;
    overflow-x:auto;
    white-space:nowrap
  }
  .forward_table{
    width: auto;
    margin:5px 2px;
    position:relative;
    margin-bottom:55px;
  }
  .forward_table ul{
    border:1px solid black;
    border-right:none;
    border-bottom: none;
    display:inline-block;
    width:6rem;
    font-size:1.3rem;
  }
  .table-data{    
    position: absolute;
    top: 0px;
    left: 6rem;
    }
  .forward_table ul:last-child{
    border-right:1px solid black;
  }
  .forward_table ul li{
    height:6rem;
    width:6rem;
    border-bottom:1px solid black;
    line-height:6rem;
    text-align: center;
    text-overflow:ellipsis;
    overflow:hidden;
    position:relative;
    font-size:1rem;
  }
  .forward_table ul li div{
    width:100%;
    height:100%;
  }
  .forward_table ul.roomsName li{
    text-align: left;
  }
  
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
